<template>
    <div id="starting">
        <el-carousel height="330px">
            <el-carousel-item v-for="item in 4" :key="item">
                <div id="newSong" v-for="(o, index) in newSong[item]" :key="index">
                    <div id="cont">
                        <img :src='"/api/" + o.imgUrl' alt="" id="img">
                        <span id="time">时长</span>
                        <router-link style="margin-top: 20px;" to="/song">{{ o.songName }}</router-link><br>
                        <router-link to="/song">{{ o.singerName }}</router-link>
                    </div>
                </div>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script>
export default {
    data() {
        return {
            newSong: [],
            id: this.$route.query.id,
        }
    },
    watch:{
        $route(){
            this.$router.go()
        }
    },
    created: function () {
        this.axios({
            url: "/api/listens/regions",
            params: {
                regionID: this.id
            }
        }).then(res => {
            this.newSong = res.data.data.data
            for (let i = 1; i <= 4; i++) {
                this.newSong[i] = res.data.data.data.slice((i - 1) * 9, i * 9)
                // console.log(this.newSong);
                for (let y in this.newSong[i]) {
                    this.newSong[i][y].singerName = this.newSong[i][y].singerName.toString()
                }
            }
        }).catch(err => {
            console.log("1",err.massage);
        })
    }
}
</script>

<style>
#starting {
    background: plum;
    width: 80%;
    margin: 0px auto;
}

#newSong {
    display: inline-block;
    width: 33%;
    margin-top: 5px;
    margin-left: 2px;
}

#newSong #img {
    width: 90px;
    height: 90px;
    float: left;
}

#newSong #cont {
    margin: 0px auto;
    width: 95%;
    border-bottom: 1px #f2f2f2 solid;
    text-align: left;
    height: 90px;
    line-height: 40px;
}

#newSong #cont:hover {
    cursor: pointer;
}

#newSong #cont span:hover {
    cursor: pointer;
    color: white;
}

#newSong #cont #time {
    float: right;
    line-height: 75px;
}
</style>